<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>04-axios中的拦截器</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<!-- 
  axios.interceptors.request.use(): 添加请求拦截器 
  1. 请求拦截器: 
  Ⅰ- 在真正发送请求前执行的回调函数
  Ⅱ- 可以对请求进行检查或配置进行特定处理
  Ⅲ- 成功的回调函数, 传递的默认是 config(也必须是)
  Ⅳ- 失败的回调函数, 传递的默认是 error

  axios.interceptors.response.use(): 添加响应拦截器 
  2. 响应拦截器
    Ⅰ- 在请求得到响应后执行的回调函数
    Ⅱ- 可以对响应数据进行特定处理
    Ⅲ- 成功的回调函数, 传递的默认是 response
    Ⅳ- 失败的回调函数, 传递的默认是 error

 -->

<body>
  <button id="addPersonBtn">点击添加一个人</button>
  <input type="text" id="personName" placeholder="请输入姓名">
  <input type="text" id="personAge" placeholder="请输入年龄">
  <br><br>
  <button id="testBtn">点击获取测试信息</button>

  <script>
    //获取dom节点
    const addPersonBtn = document.getElementById('addPersonBtn');
    const testBtn = document.getElementById('testBtn');
    const personName = document.getElementById('personName');
    const personAge = document.getElementById('personAge');


    // 添加axios全局默认配置
    //axios_0.27.2版本可以将全局默认配置写成对象形式，但是替换掉了axios原本的config，就不能和拦截器一起使用
    /* axios.defaults = {
      baseURL: 'http://localhost:5000',             //配置全局默认请求基础地址
      timeout: 2000,                                //配置全局默认超时时间
      headers: { token: 'er908s0rfsjflxmvnljf' },   //配置全局默认请求头
    }; */
    axios.defaults.baseURL = 'http://localhost:5000';             //配置全局默认请求基础地址

    // 添加请求拦截器
    axios.interceptors.request.use((config) => {
      //对请求进行检查或配置进行特定处理
      if (config.url.match(/test/)) config.timeout = 2000;
      if (config.url.match(/person/)) config.headers.token = '131safafaf';
      return config;   //必须将请求配置返回，否则就不会发出任何请求
    });

    //添加响应拦截器
    axios.interceptors.response.use(
      (response) => {
        // console.log(typeof response.data);
        if (!(response.data instanceof Object)) return '返回的数据不是json对象'
        return response.data;  //必须将响应返回，否则axios接受不到response
      },
      (error) => {
        console.log('请求出错了', error);
        return new Promise(() => { });   //终止Promise链，这样后面axios请求使用await就可以不用try...catch处理
      });

    // 添加一个人，年龄和名字--发送POST请求--携带json编码参数或urlencoded编码
    addPersonBtn.onclick = async () => {
      // 完整版
      const response = await axios({
        url: '/person11',                                               //请求地址
        method: 'POST',                                               //请求方式
        data: { name: personName.value, age: personAge.value },       //携带请求体参数，json编码 
      });
      console.log(response);
    };

    // 获取测试信息
    testBtn.onclick = async () => {
      const response = await axios({
        url: '/test1?delay=1000',
        method: 'GET',
        // timeout: 2000
      });
      console.log(response);
    }


  </script>
</body>

</html>